<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>安装</title>
		<script src="<s:url value='/js/jquery/jquery-1.5.1.min.js'/>"></script>
		<script
			src="<s:url value='/js/jquery/jquery-ui-1.8.11.custom.min.js'/>"></script>
		<script src="<s:url value='/js/jquery/jquery.ui.spinner.min.js'/>"></script>
		<script
			src="<s:url value='/js/jquery/jquery.ui.datepicker-zh-CN.js'/>"></script>
			<script src="<s:url value='/js/jqgrid/grid.locale-cn.js'/>"></script>
		<script src="<s:url value='/js/jqgrid/jquery.jqGrid.min.js'/>"></script>
		<script src="<s:url value='/js/agilepro.js'/>"></script>
		<script src="<s:url value='/js/step1.js'/>"></script>
		<script src="<s:url value='/js/step2.js'/>"></script>
		<script src="<s:url value='/js/step3.js'/>"></script>
		<script src="<s:url value='/js/step4.js'/>"></script>
		<script src="<s:url value='/js/prototype.js'/>"></script>
		<script src="<s:url value='/js/jquery/jquery-ui-timepicker-addon-0.5.min.js'/>"></script>
		<link
			href="<s:url value='/css/jquery-ui/jquery-ui-timepicer.css'/>"
			rel="stylesheet" type="text/css" />
		<link
			href="<s:url value='/css/jquery-ui/jquery-ui-1.8.11.custom.css'/>"
			rel="stylesheet" type="text/css" />
		<link href="<s:url value='/css/agilepro.css'/>" rel="stylesheet"
			type="text/css" />
		<link href="<s:url value='/css/button/button.css'/>" rel="stylesheet"
			type="text/css" />
		<link href="<s:url value='/css/jqgrid/ui.jqgrid.css'/>"
			rel="stylesheet" type="text/css" />

		<script type="text/javascript">
	<!--
		$(function() {
			$( "#tabs" ).tabs({
				selected:0,
				select: function(event, ui) {
					switch(ui.panel.id) {
						case "tab1" : return true;
						case "tab2" : 
							if(!validate_tab0()) {
								$(this).tabs("select", 0);
								return false;
							}
							return true;
						case "tab3" : 
							if(!validate_tab0()) {
								$(this).tabs("select", 0);
								return false;
							}
							if(!validate_tab1()) {
								$(this).tabs("select", 1);
								return false;
							}
							return true;
						case "tab4" : 
							if(!validate_tab0()) {
								$(this).tabs("select", 0);
								return false;
							}
							if(!validate_tab1()) {
								$(this).tabs("select", 1);
								return false;
							}
							if(!validate_tab2()) {
								$(this).tabs("select", 2);
								return false;
							}
							return true;
						default : break;
					}
					return false;
				}
			});
			
			$("#sortable_item_container").sortable();
		});
		
	//-->
	</script>
	</head>

	<body>
		<input type="hidden" id="menu_id" value="nav_ipro" />
		<div id="tabs">
			<ul>
				<li>
					<a href="#tab1" class="tab1">第1步：选择推荐宝贝</a>
				</li>
				<li>
					<a href="#tab2" class="tab2">第2步：设置样式</a>
				</li>
				<li>
					<a href="#tab3" class="tab3">第3步：安装到哪些宝贝上</a>
				</li>
				<li>
					<a href="#tab4" class="tab4">第4步：安装</a>
				</li>
			</ul>
			<div id="tab1"><%@ include file="./step1.jsp"%></div>
			<div id="tab2"><%@ include file="./step2.jsp"%></div>
			<div id="tab3"><%@ include file="./step3.jsp"%></div>
			<div id="tab4"><%@ include file="./step4.jsp"%></div>
		</div>
	</body>
</html>
